<template>
	<view class="container">
		<view class="banner">
			<u-swiper :list="listArr" height="150" radius="10" imgMode="heightFix"></u-swiper>
		</view>
		<view class="mySearch">
			<view class="selectTop">
				<view class="item">
					<view class="city select" @click="searchCity">
						{{city}}
					</view>
					<!-- <vvSelect placeholder="城市筛选" class="select" :list="city_list" label="name" valueKey="type_id"
						ref="vvSelect1" @change="pickerChange"></vvSelect> -->
					<view class="arrow">
						<u-icon name="arrow-down" color="#081738;" size="16">
						</u-icon>
						<!-- <u-icon name="close-circle" color="#081738;" size="16" >
						</u-icon> -->
					</view>
				</view>
			</view>
			<view class="search" @click="goList">
				<div class="topSearch">搜索你需要的内容</div>
				<image src="../../static/searchRight.png" mode="" class="searchBtn"></image>
			</view>
		</view>
		<view class="content-contact">
			<view class="leftCar">
				<!-- <view class="leftCar2" @click="goOrder">
					<view class="top activeItem relative">
						核销卡券
					</view>
					<view class="bot">
						核销洗车券码
					</view>
					<image src="../../static/images/index/left5.png" mode="widthFix"></image>
				</view> -->
				<view class="leftCar1" @click="goSweep">
					<view class="top activeItem relative">
						<view class="f">
							自助/自动核销
						</view>
						<view class="f">
							
						</view>
					</view>
					<view class="bot">
						扫描机器码启动洗车机
					</view>
				</view>
			</view>
			<view class="rightCars">
				<!-- <view class="treatCar" @click="goDiscount">
					<view class="top activeItem relative">
						优惠洗车
					</view>
					<view class="bot">
						洗车超优惠
					</view>
					<view class="bot1">
						赶紧来～
					</view>
				</view> -->
				<view class="treatCar" @click="goOrder">
					<view class="top activeItem relative">
						人工洗车核销
					</view>
					<view class="bot">
						核销洗车券码
					</view>
					<image src="../../static/images/index/left5.png" mode="widthFix" class="hxImg"></image>
				</view>
				<view class="botCar">
					<view class="buy" @click="buyCard">
						<view class="top activeItem relative">
							购洗车卡
						</view>
						<view class="bot">
							限时优惠购卡
						</view>
					</view>
					<button class="iconfont icon-yaoqing share"  @click="toRedeemCode">
						 <!-- open-type="share" -->
						<view>
							<view class="top activeItem relative">
								兑换码
							</view>
							<view class="bot">
								参与兑换得
							</view>
							<view class="bot1">
								优惠
							</view>
						</view>
					</button>
				</view>
			</view>
		</view>
		<view class="recommend f-column ">
			<view class="title activeItem relative">
				精选推荐
			</view>
			<view class="list f-column" v-for="(item,index) in list" :key="item.id" @click="goDetails(item.id)">
				<view class="list_item" :style="{background:index==0?'#2CB9A4':'#fff'}">
					<view class="title" v-if="index==0">
						今日推荐
					</view>
					<view class="content" :style="{padding:index==0?'20rpx;':'0;','margin-top':index==0?'20rpx;':'0;'}">
						<view class="item">
							<view class="icon">
								<u--image :src="item.logo" :fade="true" duration="450" width="130rpx" height="130rpx"
									radius="6"></u--image>
							</view>
							<view class="entityList">
								<view class="num" style="font-size: 32rpx;">
									{{item.name || '--'}}
								</view>
								<view class="name">
									<text>{{item.address}}</text>
									<view class="right">
										<image src="../../static/icon/my/goIcon.png" mode="" class="image"></image>
										<text class="themeColor">{{item.distance || 0}}km</text>
									</view>
								</view>
								<view>
									<text v-if="item.openswitch == 1" class="tag">正常营业</text>
									<text v-if="item.openswitch == 2" class="tag error">未营业</text>
									<text v-if="item.fly_id != '0'" class="tag">空闲:{{ item.machine[1].value || 0}}台</text>
									<text v-if="item.fly_id != '0'" class="tag">总数:{{ item.machine[0].value || 0}}台</text>
								</view>
							</view>
						</view>
						<view class="conBot">
							<view class="f-row ">
								<view class="down">
									<view class="" style="font-size: 26rpx;">
										优惠价
									</view>
									<view class="" style="font-size: 26rpx;">

									</view>
								</view>
								<view class="down_price" v-if="item.goods.length!=0">
									¥{{item.goods[0].actual_payment}}
								</view>
								<view class="price" v-if="item.goods.length!=0">
									原价¥{{item.goods[0].price}}
								</view>
							</view>
							<view class="f-row goNear" @click.stop="getOpenMap(item)">
								<image src="../../static/images/index/btnBg.png" mode="widthFix"
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
								<view class="">
									前往洗车
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-if="last_page==form.page&&list.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
		<u-back-top :scroll-top="scrollTop" 
		:iconStyle="backTopData.iconStyle" 
		:customStyle="backTopData.customStyle" 
		 :bottom="backTopData.bottom"
		  :left="backTopData.left"
		:icon="backTopData.icon"></u-back-top>
	</view>
</template>

<script>
	// import minxins from '@/utils/openLocationMinxin.js';
	let banner1 = require('../../static/banner1.png')
	let banner2 = require('../../static/banner2.png')
	let toTop = require('../../static/images/index/toTop.png')
	import {
		todaySell,
		bannerList
	} from '@/request/api.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	export default {
		// mixins: [minxins],
		components: {
			vvSelect,
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		data() {
			return {
				backTopData: {
					bottom: 10,
					left:20,
					icon: toTop,
					iconStyle: {
						fontSize: '60rpx',
						color: '#2CB9A4',
						width:"28px",
						height:"50px"
					},
					customStyle: {
						backgroundColor: 'rgba(255,255,255,0)',
					},
				},
				
				scrollTop: 0,
				city: '成都市',
				share: {
					title: '',
					path: '/pages/index/index',
					imageUrl: '',
					desc: '',
					content: ''
				},
				list: [],
				last_page: 1,
				listArr: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				city_list: [{
					type_id: 1,
					name: '成都'
				}],
				form: {
					lon: '',
					lat: '',
					page: 1
				},
				getUrl: '', //获取从商户端的url
			}
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.list = []
			this.last_page = 1
			this.getTodaySell()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getTodaySell()
			}
		},
		onLoad(res) {
			this.listArr.push(banner1)
			this.listArr.push(banner2)
			let resCode = {}
			if (res.q) {
				let data = unescape(res.q.replace(/\\u/g, '%u'))
				this.getUrl = data;
				let parames = this.getQueryString(this.getUrl)
				resCode = {
					id: parames.id,
					type: parames.type
				}
				// 只要是后台返回的都保存，包括商户端的推广，分销商的推广，卡经销的推广
				uni.setStorageSync('resCode', resCode)
			}
			if (res.id) {
				resCode = res
				// 只要是后台返回的都保存，包括商户端的推广，分销商的推广，卡经销的推广
				uni.setStorageSync('resCode', resCode)
			}
			this.bannerList()
		},
		onShow() {
			this.form.page = 1
			this.list = []
			this.last_page = 1
			this.getTodaySell()
			if(this.form.lon){
				return false;
			}
			uni.setStorageSync('city', this.city)
			this.getAuthorizeInfo()
			uni.$on('setCity', e => {
				this.city = e.name
				uni.setStorageSync('city', this.city)
			})
			
			
		},
		methods: {
			goSweep() {
				uni.scanCode({
					success: (res) =>{
						let parames = this.getQueryString(res.result)
						console.log('parames' + parames.device_name);
						if(parames.device_name){
							uni.navigateTo({
								url:'/my_pages/codeSweepWash/codeSweepWash?type=1&scene='+parames.device_name
							})
							return false;
						}else if (res.path) {
							uni.navigateTo({
								url: `/${res.path}`
							})
						} else {
							setTimeout(() => {
								uni.showToast({
									duration: 1500,
									icon: 'none',
									title: '您的二维码无法识别!'
								})
							}, 1500)
						}
					},
					fail: function() {
						// console.log(111)
						setTimeout(() => {
							uni.showToast({
								duration: 1500,
								icon: 'none',
								title: '您的二维码无法识别!'
							})
						}, 1500)
					}
				});
				// uni.navigateTo({
				// 	url:'/my_pages/codeSweepWash/codeSweepWash'
				// })
			},
			getQueryString(url) {
				let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
				let parames = {}; // 定义参数对象
				url.replace(pattern, ($, $1, $2) => {
					parames[$1] = $2;
				});
				return parames;
			},
			async bannerList() {
				let res = await bannerList()
				let arr = res.data.map(item => {
					return item.image
				})
				this.listArr = arr
				// console.log(arr, 111)
			},
			goOrder() {
				uni.navigateTo({
					url: '/my_pages/myOrder/myOrder?form=index'
				})
			},
			onShareClick() {
				wx.shareAppMessage({
					title: '团洗',
					path: '/pages/index/index',
					success: function() {
						console.log('分享成功')
					}
				})
			},
			goList() {
				uni.navigateTo({
					url: '/pages/index/searchList?type=search'
				})
			},
			goDiscount() {
				uni.navigateTo({
					url: '/pages/index/searchList?type=disCount'
				})
			},
			searchCity() {
				uni.navigateTo({
					url: '/pages/index/change_city'
				})
			},
			openAuthSetting() {
				let that = this;
				uni.getSetting({
					success: (res) => {
						console.log(res, JSON.stringify(res, "getSetting"));
						if (
							res.authSetting["scope.userLocation"] != undefined &&
							res.authSetting["scope.userLocation"] != true
						) {
							uni.showModal({
								title: "请求授权当前位置",
								content: "需要获取您的地理位置，请确认授权",
								success: function(res) {
									if (res.cancel) {
										uni.showToast({
											title: "拒绝授权",
											icon: "none"
										});
									} else if (res.confirm) {
										uni.openSetting({
											success: function(dataAu) {
												console.log(dataAu, "openSetting");
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													uni.showToast({
														title: "授权成功",
														icon: "none"
													});
													//再次授权，调用wx.getLocation的API
													that.getAuthorizeInfo();
												} else {
													uni.showToast({
														title: "授权失败",
														icon: "none"
													});
												}
											},
										});
									}
								},
							});
						} else if (res.authSetting["scope.userLocation"] == undefined) {
							//调用wx.getLocation的API
							console.log("首次授权");
							this.getAuthorizeInfo();
						} else {
							//调用wx.getLocation的API
							this.getAuthorizeInfo();
						}
					},
				})
			},
			// 位置授权
			getAuthorizeInfo() {
				let self = this
				console.log(111)
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								console.log("经纬度1", res);
								self.form.lon = res.longitude
								self.form.lat = res.latitude
								
								self.getTodaySell()
							},
						})
					},
					fail() { // 拒绝授权
						// this.openConfirm();
						// self.$refs.uToast.show({
						// 	type: 'error',
						// 	title: '您必须允许所在位置才能使用供应大厅功能',
						// 	message: "您必须允许所在位置才能使用供应大厅功能",
						// })
						self.openAuthSetting()
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			async getTodaySell() {
				let res = await todaySell(this.form);
				if (this.form.page == 1) {
					this.list = res.data.data;
				} else {
					this.list = [...this.list, ...res.data.data]
				}
				console.log(this.list, 'cccccccccccccccccc')
				this.last_page = res.data.last_page
			},
			goDetails(e) {
				uni.navigateTo({
					url: `/pages/index/productDetails?id=` + e,
				})
			},
			buyCard() {
				uni.navigateTo({
					url: `/my_pages/cardLIst/cardLIst`,
					// url: `/my_pages/buyCard/buyCard`,
				})
			},
			toRedeemCode(){
				uni.navigateTo({
					url: `/my_pages/redeemCode/redeemCode`,
				})
			},
			pickerChange(e) {
				this.form.type_id = e
			},
			closeSel1() {
				this.form.type_id = ''
				this.$refs.vvSelect1.emptCheckLabels()
				this.form.page = 1
				this.projectListData = []
				// this.projectList()
			},
		}
	}
</script>
<style>
	/* button自带样式清除 */
	.student-orther-icon button::after {
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.student-orther-icon button {
		background-color: transparent !important;
		padding: 0 !important;
		line-height: inherit !important;
		margin: 0 !important;
		width: auto !important;
		font-weight: 500 !important;
		border-radius: none !important;
	}
</style>
<style scoped lang="scss">
	.recommend {
		padding: 0 20rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.title {
			font-size: 30rpx;
			line-height: 20px;
			color: #222222;
			font-weight: 600;
			position: relative;
		}

		.activeItem::after {
			content: '';
			position: absolute;
			width: 60px;
			height: 6px;
			left: 3rpx;
			bottom: 0px;
			background: rgba(9, 187, 7, 0.15);
			border-radius: 8px;
		}

		.list {
			margin-top: 20rpx;

			.content {
				background-color: #fff;
				// box-shadow: 0px 0px 10px rgba(8, 23, 56, 0.05);
				border-radius: 10px;
				padding: 20rpx;
				margin-top: 20rpx;

				.conBot {
					align-items: flex-end;

					.f-row {
						display: flex;
						align-items: flex-end;
					}

					.goNear {
						background: #2CB9A4;
						color: #fff;
						height: 60rpx;
						justify-content: center;
						align-items: center;
						border-radius: 10rpx;
						padding: 10rpx 20rpx;
						font-size: 32rpx;
						align-items: center;
					}

					display: flex;
					justify-content: space-between;
					color: #2CB9A4;

					.down {
						background: #C0EAE4;
						justify-content: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 10rpx;
						font-size: 22rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					.down_price {
						margin-right: 10rpx;
						font-weight: 600;
						font-size: 30rpx;
						color: #FF6666;
					}

					.price {
						margin-right: 10rpx;
						font-size: 28rpx;
						color: #979797;
					}
				}
			}

			.list_item {
				display: flex;
				flex-direction: column;
				background: #2CB9A4;
				border-radius: 20rpx;
				padding: 20rpx;

				.title {
					color: #fff;
					font-size: 30rpx;
					font-weight: 600;
				}

				.item {
					display: flex;
					color: #505050;
					margin: 15rpx 0;
					border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
					padding-bottom: 15rpx;
					box-sizing: border-box;
					background: #fff;
					border-radius: 20rpx;

					.icon {
						width: 140rpx;
						height: 140rpx;

						.image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.entityList {
						flex: 1;
						display: flex;
						flex-direction: column;
						overflow: hidden;
						text-overflow: ellipsis;
						justify-content: space-between;

						.name {
							display: flex;
							justify-content: space-between;
							margin-left: 15rpx;
							white-space: nowrap;
							overflow: hidden;
							// text-overflow: ellipsis;
							color: #BABABA;
							font-size: 32rpx;

							text {
								flex: 1;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.right {
								width: 180rpx;
								text-align: right;
							}

							.image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}

						.num {
							margin-left: 15rpx;
							margin-top: 5rpx;
							color: #2CB9A4;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.content-contact {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;

		.relative {
			position: relative;
		}



		.leftCar {
			// background-size: 100% 100%;
			// background-repeat: no-repeat;
			width: 49%;
			// height: 510rpx;
			// border-radius: 20rpx;
			// background-image: url(../../static/images/index/left1.png);
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.leftCar2 {
				border-radius: 20rpx;
				height: 40%;
				background-color: #fff;
				position: relative;

				// background-image: url(../../static/images/index/left5.png);
				// background-size: 100% 100%;
				// background-repeat: no-repeat;
				image {
					width: 80rpx;
					position: absolute;
					right: 0;
					top: 20rpx;
				}
			}

			.leftCar1 {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 100%;
				border-radius: 20rpx;
				background-image: url(../../static/images/index/left1.png);

				.f {
					font-size: 38rpx;
				}
			}

			.activeItem::after {
				content: '';
				position: absolute;
				width: 124px;
				height: 6px;
				left: 33rpx;
				bottom: -3px;
				background: rgba(9, 187, 7, 0.15);
				border-radius: 8px;
			}

			.top {
				color: #000;
				font-weight: 600;
				font-size: 38rpx;
				padding-left: 27rpx;
				margin-top: 35rpx;
			}

			.bot {
				color: #BABABA;
				font-size: 28rpx;
				padding-left: 27rpx;
				margin-top: 12rpx;
			}

		}




		.rightCars {
			width: 49%;
			height: 510rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.treatCar {
				// background-color: #fff;
				position: relative;
				border-radius: 20rpx;
				height: 40%;
				background-color: #fff;
				border-radius: 20rpx;
				// background-image: url(../../static/images/index/right1.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.hxImg {
					width: 80rpx;
					position: absolute;
					right: 0;
					top: 20rpx;
				}

				.top {
					color: #000;
					font-weight: 600;
					font-size: 34rpx;
					padding-left: 40rpx;
					margin-top: 40rpx;
				}

				.activeItem::after {
					content: '';
					position: absolute;
					width: 108px;
					height: 4px;
					left: 40rpx;
					bottom: 0px;
					background: rgba(9, 187, 7, 0.15);
					border-radius: 8px;
				}

				.bot {
					color: #BABABA;
					font-size: 28rpx;
					padding-left: 40rpx;
					margin-top: 20rpx;
				}

				.bot1 {
					color: #BABABA;
					font-size: 28rpx;
					padding-left: 40rpx;
					margin-top: 10rpx;
				}
			}

			.botCar {
				// background-color: #fff;
				border-radius: 20rpx;
				height: 55%;
				display: flex;
				justify-content: space-between;

				.buy {
					width: 48%;
					background: #fff;
					border-radius: 20rpx;
					background-image: url(../../static/images/index/right2.png);
					background-size: 100% 50%;
					background-repeat: no-repeat;
					background-position-y: bottom;
					background-position-x: right;
					background-size: 82%;

					.top {
						color: #000;
						font-weight: 600;
						font-size: 32rpx;
						text-align: center;
						margin-top: 20rpx;

					}

					.activeItem::after {
						content: '';
						position: absolute;
						width: 64px;
						height: 4px;
						left: 22rpx;
						bottom: 0px;
						background: rgba(9, 187, 7, 0.15);
						border-radius: 8px;
					}

					.bot {
						color: #BABABA;
						font-size: 24rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}

				.share {
					width: 48%;
					background: #fff;
					border-radius: 20rpx;
					background-image: url(../../static/images/index/right3.png);
					background-size: 100% 50%;
					background-repeat: no-repeat;
					background-position-y: bottom;
					background-position-x: right;
					background-size: 82%;

					.top {
						color: #000;
						font-weight: 600;
						font-size: 32rpx;
						text-align: center;
						// margin-top: 20rpx;
					}

					.activeItem::after {
						content: '';
						position: absolute;
						width: 64px;
						height: 4px;
						left: 22rpx;
						bottom: 10px;
						background: rgba(9, 187, 7, 0.15);
						border-radius: 8px;
					}

					.bot {
						color: #BABABA;
						font-size: 24rpx;
						text-align: center;
						margin-top: -11rpx;
					}

					.bot1 {
						color: #BABABA;
						font-size: 24rpx;
						text-align: left;
						margin-top: -12rpx;
						padding-left: 27rpx;
					}
				}
			}
		}
	}

	.mySearch {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		position: relative;
		margin: 15rpx 0;
		padding: 0 20rpx;
		flex: 1;
	}

	.selectTop {
		width: 250rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 15rpx 0;
		margin-left: -20rpx;
		margin-right: -20rpx;
		padding: 20rpx 40rpx;
		// background: #fff;
		// border-bottom: 1px solid #E2E2E2;
		color: #081738;
		font-size: 24rpx;
		position: relative;

		.item {
			display: flex;
			width: 100%;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 60px;
			padding: 15rpx;

			.select {
				flex: 1;
				color: #BABABA;
			}

			.arrow {
				width: 20rpx;
				height: 20rpx;
				margin-right: 8rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.topSearch {
		// border: 1px solid #ccc;
		border-radius: 80px;
		height: 70rpx;
		line-height: 70rpx;
		display: inherit;
		padding: 0 20rpx;
		color: #BABABA;
		padding-right: 80rpx;
		background: rgba(255, 255, 255, 0.5);
	}

	.searchBtn {
		position: absolute;
		height: 40rpx;
		width: 40rpx;
		right: 50rpx;
		top: 15rpx;
	}
</style>

<style>
	page {
		background: #f5f5f5;
	}

	view,
	textarea,
	input,
	text,
	button {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: "微软雅黑";
	}

	.uni-checkbox-input {
		border-radius: 50% !important;
	}

	.container {
		background: #f5f5f5;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		line-clamp: 1;
		box-orient: vertical;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.line2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: box;
		display: -webkit-box;
		line-clamp: 2;
		box-orient: vertical;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		/* 英文换行问题 */
	}

	.centerboth {
		display: flex;
		display: -webkit-flex;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}

	.clearfix:after {
		content: "";
		display: block;
		visibility: hidden;
		height: 0;
		clear: both;
	}

	.clearfix {
		zoom: 1;
	}

	image {
		padding: 0;
		margin: 0;
	}

	textarea {
		width: 300rpx;
		height: 75rpx;
		display: block;
		position: relative;
		font-size: 28rpx;
	}

	button::after {
		border: none;
	}

	input:-ms-input-placeholder {
		color: #808080;
	}

	.container {
		background: #F5F5F5;
	}

	.banner {
		width: 100%;
		padding: 0 24rpx;
		background-image: linear-gradient(to bottom, #2CB9A4, transparent);
	}

	.sideslip-car {
		width: 100%;
	}
	.tag {
		background-color: #2cb9a4;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		color: #fff;
		display: inline-block;
		margin-left: 16rpx;
	}
	.error {
		background-color: #FF6666;
	}
</style>